<!--
 Anchor 3D models example
-->
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://aframe.io/releases/1.4.1/aframe.min.js"></script>
    <script src="../../src/face-target/aframe.js" type="module"></script>
    
    <script>
      document.addEventListener("DOMContentLoaded", function() {
	const list = ["glasses1", "glasses2", "hat1", "hat2", "earring"];
	const visibles = [true, false, false, true, false];

	const setVisible = (button, entities, visible) => {
	  if (visible) {
	    button.classList.add("selected");
	  } else {
	    button.classList.remove("selected");
	  }
	  entities.forEach((entity) => {
	    entity.setAttribute("visible", visible);
	  });
	}
	list.forEach((item, index) => {
	  const button = document.querySelector("#" + item);
	  const entities = document.querySelectorAll("." + item + "-entity");
	  setVisible(button, entities, visibles[index]);
	  button.addEventListener('click', () => {
	    visibles[index] = !visibles[index];
	    setVisible(button, entities, visibles[index]);
	  });
	});
      })
    </script>
   
    <style>
      body {
        margin: 0;
      }
      .example-container {
        overflow: hidden;
        position: absolute;
        width: 100%;
        height: 100%;
      }
      .options-panel {
	position: fixed;
	top: 0;
	left: 50%;
	display: flex;
	transform: translateX(-50%);
	z-index: 2;
      }
      .options-panel img {
	border: solid 2px;
	width: 50px;
	height: 50px;
	object-fit: cover;
	cursor: pointer;
      }
      .options-panel img.selected {
	border-color: green;
      }
    </style>
  </head>

  <body>
    <div class="example-container">
      <div class="options-panel">
	<img id="hat1" src="./assets/hat/thumbnail.png"/>
	<img id="hat2" src="./assets/hat2/thumbnail.png"/>
	<img id="glasses1" src="./assets/glasses/thumbnail.png"/>
	<img id="glasses2" src="./assets/glasses2/thumbnail.png"/>
	<img id="earring" src="./assets/earring/thumbnail.png"/>
      </div>

      <a-scene mindar-face embedded color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">
        <a-assets>
          <a-asset-item id="headModel" src="./assets/sparkar/headOccluder.glb"></a-asset-item>
          <a-asset-item id="glassesModel" src="./assets/glasses/scene.gltf"></a-asset-item>
          <a-asset-item id="glassesModel2" src="./assets/glasses2/scene.gltf"></a-asset-item>
          <a-asset-item id="hatModel" src="./assets/hat/scene.gltf"></a-asset-item>
          <a-asset-item id="hatModel2" src="./assets/hat2/scene.gltf"></a-asset-item>
          <a-asset-item id="earringModel" src="./assets/earring/scene.gltf"></a-asset-item>
        </a-assets>

        <a-camera active="false" position="0 0 0" look-controls="enabled: false"></a-camera>

	<!-- head occluder -->
        <a-entity mindar-face-target="anchorIndex: 168">
	  <a-gltf-model mindar-face-occluder position="0 -0.3 0.15" rotation="0 0 0" scale="0.065 0.065 0.065" src="#headModel"></a-gltf-model>
        </a-entity>

        <a-entity mindar-face-target="anchorIndex: 10">
	  <a-gltf-model rotation="0 -0 0" position="0 1.0 -0.5" scale="0.5 0.5 0.5" src="#hatModel" class="hat1-entity" visible="false"></a-gltf-model>
        </a-entity>
        <a-entity mindar-face-target="anchorIndex: 10">
	  <a-gltf-model rotation="15 -0 0" position="0 -0.22 -0.7" scale="0.01 0.01 0.01" src="#hatModel2" class="hat2-entity" visible="false"></a-gltf-model>
        </a-entity>

        <a-entity mindar-face-target="anchorIndex: 168">
	  <a-gltf-model rotation="0 -0 0" position="0 0 -0.1" scale="0.009 0.009 0.009" src="#glassesModel" class="glasses1-entity" visible="false"></a-gltf-model>
        </a-entity>

        <a-entity mindar-face-target="anchorIndex: 168">
	  <a-gltf-model rotation="0 -90 0" position="0 -0.4 -0.25" scale="0.6 0.6 0.6" src="#glassesModel2" class="glasses2-entity" visible="false"></a-gltf-model>
        </a-entity>
	
        <a-entity mindar-face-target="anchorIndex: 127">
	  <a-gltf-model rotation="-0.1 -50 0" position="-0.05 -0.4 -0.3" scale="0.07 0.07 0.07" src="#earringModel" class="earring-entity" visible="false"></a-gltf-model>
        </a-entity>

        <a-entity mindar-face-target="anchorIndex: 356">
	  <a-gltf-model rotation="0.1 50 0" position="0.05 -0.4 -0.3" scale="0.07 0.07 0.07" src="#earringModel" class="earring-entity" visible="false"></a-gltf-model>
        </a-entity>
      </a-scene>
    </div>
  </body>
</html>
